<template>
  <div class='detail'>
    <van-tabs v-model="active">
      <van-tab v-for="(item, index) in tabData" :key="index" :title="item.label+`(${detailData[item.key]?detailData[item.key].length:0})`">
        <div class="list-box">
          <ul>
            <li v-for="(opt, index) in detailData[item.key]" :key="index">
              <img :src="opt.wx_pic||opt.photo||defaultImg" alt="">
              <div class="content">
                <p class="title">{{opt.name}}</p>
                <p class="number">{{opt.number}}</p>
              </div>
            </li>
          </ul>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import MixIns from '../../../../../mixin/mixin.js'
export default {
  components: {},
  name: "",
  data() {
    return {
      active:0,
      defaultImg:require("../../../../../assets/images/home/default.jpg"),
      tabData:[
        {label:"未确认",key:"unattend"},
        {label:"确认",key:"attend"},
        {label:"请假",key:"leave"},
      ]
    };
  },
  methods: {
    getListData(){

    }
  },
  created() {},
  mixins:[MixIns]
};
</script>
<style lang="scss" scoped>
.detail {

  .list-box{
    height: calc(100vh - 90px);
    overflow: auto;
  }
  li{
    display: flex;
    padding: 10px;
    box-sizing: border-box;
    border-bottom: 1px solid #ddd;

    .content{
      flex: 1
    }
    .title{
      font-size: 16px;
      margin-top: 5px;
    }
    .number{
      font-size: 14px;
      color: #666;
      margin-top: 5px;
    }
  }
  li:nth-of-type(1){
    border-top: 1px solid #ddd;
  }
  img{
    width: 120px;
    height: 120px;
    border-radius: 50%;
    margin-right: 20px;
  }
}
</style>